$(function(){
	// 设置页面布局
	var H = $(window).height();
	H = H - 44 -50;
	$(".menu-list").css("height",H)
	$(".menu-box").css("height",H)
	
	
	//ajax练习3
	$.ajax({
		type:'get',
		dataType:'json',
		data:{},
		url:http+'/menu.php',
		success:function(data){
			console.log(data)
			if(data.code ==200){
				var data = data.data;
				console.log(data)
				if(data.length >0){
					var str = '';
					$(".menu-list ul").empty();
					for(var i = 0 ;i< data.length;i++){
						if(i == 0){
							str +='<li class="active" data-time='+data[i].id+' data-img='+data[i].img+'><a href="">'+data[i].name+'</a></li>'
						}
						else{
							str +='<li data-time='+data[i].id+' data-img='+data[i].img+'><a href="">'+data[i].name+'</a></li>'
						}
					}
						$(".menu-list ul").append(str);
						$(".menu-list li").click(tabMenu);
						var classID = data[0].id;
						var img = data[0].img;
						rightData(classID,img)
						
				}
			}
		},
		error:function(){
			alert("数据请求失败")
		}
	})
	function tabMenu(e){
		e.preventDefault();
		$(this).addClass("active").siblings().removeAttr("class");
		var classID  = $(this).attr('data-time');
		console.log(classID)
		var img = $(this).attr('data-img')
		rightData(classID,img)
	}
	
	
	function rightData(classID,img){
		$(".menu-inner a img").attr('src',picurl+img); //更换栏目图
		$(".menu-img").parent().attr("href","list.html?classID="+classID)
		$.ajax({
		type:"get",
		url:http+"/list.php",
		async:true,
		dataType:'json',
		data:{
			classID:classID
		},
		success:function(data){
			console.log(data)
			if(data.code == 200){
				var data = data.data;
				if(data.length>0){
					var str = '';
					$(".menu-box ul").empty();
					for(var i = 0 ;i<data.length;i++){
						str +='<li>'
						+'<a href=""><img src="'+data[i].img+'" alt="" /></a>'
						+'</li>'
					}
					$(".menu-box ul").append(str)
				}
			}
		}
	});
	}
	
	
	
	
	
	
	//ajax练习2
//	$.ajax({
//		type:"get",
//		url:http+"/menu.php",
//		async:true,
//		dataType:"json",
//		data:{},
//		success:function(data){
//			console.log(data)
//			if(data.code == 200){
//				var data = data.data;
//				if(data.length >0){
//					$(".menu-list ul").empty();
//					var str = '';
//					for(var i =0 ;i<data.length;i++){
//						if(i==0){
//							str +='<li class="active" data-idx='+data[i].id+' data-img='+data[i].img+'><a href="">'+data[i].name+'</a></li>'
//						}else{
//							str +='<li data-idx='+data[i].id+' data-img='+data[i].img+'><a href="">'+data[i].name+'</a></li>'
//						}
//					}
//					$(".menu-list ul").append(str)
//					$(".menu-list li").click(tabMenu);
//					var classID = data[0].id;
//					var img = data[0].img
//					rightData(classID,img)
//				}
//				else{
//					alert("传输失败")
//				}
//			}
//		},
//		error:function(){
//			alert("传输失败")
//		}
//	});
//		
//		function tabMenu(e){
//			e.preventDefault();
//			$(this).addClass("active").siblings().removeClass("active");
//			//console.log($(this))
//			var classID = $(this).attr("data-idx");
//			console.log(classID)
//			var img = $(this).attr('data-img');
//			console.log(img)
//			rightData(classID,img);
//		};
//		function rightData(classID,img){
//			$(".menu-inner img").attr("src",picurl+img)
//			$.ajax({
//				type:"get",
//				url:http+"/list.php",
//				dataType:'json',
//				data:{
//					classID:classID
//				},
//				sueccess:function(data){
//					console.log(data)
//				},
//				error:function(){
//					alert("11")
//				}
//			});
//		}
//	
	
	
//	$.ajax({
//		url:http+"menu.php",
//		type:"get",
//		dataType:"json",
//		data:{},
//		success:function(data){
//			if(data.code==200){
//				var data = data.data;
//				if(data.length > 0){
//					$(".menu-list ul").empty();
//					//$(".menu-inner a").empty();
//					//var ad = '';
//					var str ='';
//					console.log(data)
//					for(var i = 0 ;i<data.length;i++){
//						//ad +='<img class="menu-img" src='+data[i].img+' alt="" />'
//						if(i == 0){
//						 str+=
//						'<li class="active" data-img="'+data[i].img+'" data-time='+[i+1]+'><a href="">'+data[i].name+'</a></li>';
//						}
//						else{
//							str+=
//						'<li data-time='+[i + 1]+' data-img="'+data[i].img+'"><a href="">'+data[i].name+'</a></li>'
//						}
//					}
//					$(".menu-list ul").append(str);
//					//$(".menu-inner a").append(ad)
//				//	tabmenu(1)
////					$(".menu-list li").click(function(e){
////						e.preventDefault();
////						$(this).addClass('active').siblings().removeClass('active');
////						console.log( this.getAttribute("data-time"));
////						var classID =  this.getAttribute("data-time");
////						tabmenu(classID)
////					})
//					$(".menu-list li").click(tabMenu);
//					var classID = data[0].id;
//					var img = data[0].img;
//					rightData(classID,img)
//				}
//			}
//		},
//		error:function(err){
//			alert("数据请求失败")
//		}
//	})
//	//左边数据显示
//	function rightData(classID,img){
//		$(".menu-img").attr("src",indexUrl+img)		//更换栏目图
//		$.ajax({
//			//点击左边列表出现图片
//			type:"get",
//			url:http+"/list.php",
//			dataType:"json",
//			data:{
//				classID:classID
//			},
//			success:function(data){
//				console.log(data)
//				if(data.code == 200){
//					var data = data.data;
//					if(data.length > 0){
//						var str = '';
//						$(".menu-inner ul").empty()
//						for(var i = 0 ;i < data.length ; i++){
//							str += '<li>'
//							+'<a href=""><img src='+data[i].img+' alt="" /></a>'
//						+'</li>'
//						}
//						$(".menu-inner ul").append(str);
//					//	list();
//					}
//				}
//			},
//			error:function(){
//				alert("请求错误")
//			}
//		})
//	}
//	
//	// 切换tab
//	function tabMenu(e){
//		e.preventDefault(); // 组织默认事件，防止a跳转
//		console.log(this)
//		$(this).addClass("active").siblings().removeClass("active");
//		var classID = $(this).attr("data-time");
//		var img = $(this).attr("data-img");
//		rightData(classID,img);
//	}
	
	
	
	
	
})
